<div id="product_detail">
  <div class="col1">
    <% if @product.has_image? %>
      <img  src="<%= @product.images[0] %>"
            data-glisse-big="<%= @product.images[0] %>"
            class="productImage"
            rel="group1" />
      <% if @product.images.length > 1 %>
        <% @product.images.each_with_index do |img, index| %>
          <% next if index == 0 %>
          <% if index % 2 == 1 %>
            <img  src="<%= img %>"
                  data-glisse-big="<%= img %>"
                  class="productImage"
                  style="clear:both;float:left;width:50%"
                  rel="group1" />
          <% else %>
            <img  src="<%= img %>"
                  data-glisse-big="<%= img %>"
                  class="productImage"
                  style="float:left;width:50%"
                  rel="group1" />
          <% end %>
        <% end %>
      <% end %>
      <script type="text/javascript">
        $(function() {
          $(".productImage").glisse({
            changeSpeed: 550, 
            speed: 500,
            effect:'rotate',
            fullscreen: false
          });
        });
      </script>
    <% end %>
  </div>
  <div class="col2">
    <div class="info">
      <%= render partial: "product_info", locals: {product: @product} %>
    </div>
    <% if @product.in_store? %>
      <%= form_tag client_add_to_cart_path(product_id: @product.id.to_s, category_id: @category_id), method: "post", class: "add_to_cart_form" do %>
        <span class="label"><%= t("client.select_quantity") %></span>
        <%
          quantity_opts = []
          (1..@product.quantity).each do |q|
            quantity_opts << [q, q]
          end
        %>
        <%= select_tag :quantity, options_for_select(quantity_opts, 1), id: "quantity_select" %>
        <span class="label" style="margin-left:20px;"><%= t("client.total") %>:</span>
        <span id="total"><%= @product.price %></span>
        <br/>
        <% custom_field_id = 0 %>
        <% @product.custom_fields.each do |name, options| %>
          <span class="label"><%= name %></span>
          <%= hidden_field_tag "_custom_field_name_#{custom_field_id}", name %>
          <%
            options_opts = []
            options.each do |o|
              options_opts << [o, o]
            end
          %>
          <%= select_tag(
                "_custom_field_value_#{custom_field_id}",
                options_for_select(options_opts, 1),
                id: "quantity_select") %>
          <br/>
          <% custom_field_id = custom_field_id + 1 %>
        <% end %>
        <%= submit_tag t("client.add_to_cart"), class: "blueButton", style: "margin-top:10px;" %>
      <% end %>
    <% end %>
    <div class="desc"><%= @product.desc.html_safe %></div>
    <br/>
    <div class="fb-like fbsp" data-href="<%= get_request_url %>" data-layout="button_count" data-action="like" data-show-faces="false" data-share="true"></div>
    <div class="fbComments fbsp">
      <fb:comments href="<%= get_request_url %>" numposts="5" colorscheme="light"></fb:comments>
    </div>
  </div>
</div>

<script type="text/javascript">
  var price = <%= @product.price %>;
  var total = price;
  var $totalText = $("#total");
  $totalText.html(total.format(0, 3));
  $("#quantity_select").change(function() {
    total = parseInt($(this).val()) * price;
    $totalText.html(total.format(0, 3));
  });
</script>